<!DOCTYPE html>
<html>
  <head>
    <title>markdown编辑器</title>
  </head>
  <body>
    <canvas id="c_n9" width="1920" height="990"
     style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.1;background-color: #32CD32;"></canvas>
    <script src="./lz.js"></script>
  
    <center>
    
    <h1>markdown编辑器</h1>
  
    <textarea id="text-input" oninput="this.editor.update()"
    rows="6" cols="60">在这里输入 **Markdown**</textarea>
    
    </center>
    
    <hr />
    
    <div style="display: flex;width:100%;">
      <div style="width:100%;height:200px;background-color:grey;color:white;margin-right:10px;overflow:auto;" id="html_code"> </div>
      <div style="width:100%;height:200px;background-color:pink;color:black;overflow:auto;" id="look"> </div>
    </div>
    
    <hr />
    
    <center>
      <h2>HTML转markdown（beta）</h2>
    </center>
    
    <div style="width:100%;height:200px;background-color:tomato;color:black;overflow:auto;" id="html2markdown"> </div>
    
    
    <script src="./markdown.min.js"></script>
    <script src="./html2md.js"></script>
    
    <script>
      function Editor(input, preview) {
        this.update = function () {
          html_code.innerText = markdown.toHTML(input.value);
          look.innerHTML = markdown.toHTML(input.value);
          html2markdown.innerText = html2md(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("look"),$("html"),$("html2markdown"));
    </script>
  </body>
</html>